<template>
  <div class="activity-list" v-infinite-scroll="bindLoad" :infinite-scroll-disabled="disabled">
    <template v-if="state.total">
      <template v-if="state.dataList.length">
        <div class="activity" v-for="(activity, index) in state.dataList" :key="activity.id"
          @click="handleGoTo(activity)">
          <div class="activity-img">
            <el-image style="width: 100%; height: 100%" :src="activity.pic" fit="cover"></el-image>
            <span class="activity-tag" :class="`activity-tag__${activity.state}`">{{ activity.stateDisplay
              }}</span>
          </div>
          <div class="activity-info">
            <el-text tag="div" class="activity-title"
              style="--el-text-font-size: var(--el-font-size-medium);color: var(--jbc-font-color)" truncated>{{
                activity.name }}</el-text>
            <div class="activity-time">
              预售时间：{{ activity.timeRange }}
            </div>
            <el-text tag="div" class="activity-areas" truncated>
              预售区域：{{ activity.areaNames }}
            </el-text>
          </div>
        </div>
      </template>
      <p class="activity-list--tips" v-if="state.loading">Loading...</p>
      <p class="activity-list--tips" v-if="!state.loading && state.noMore">没有更多了</p>
    </template>
    <el-empty style="width: 100%;" v-else description="暂无商品" />
  </div>
</template>

<script setup name="distributionList">
import { appDistributionQuerListGet } from '@/api/common'
import { dayjs } from 'element-plus'
import { nextTick } from 'vue'
const stateMap = {
  0: '待开启',
  1: '进行中',
  2: '已结束',
  3: '已参加'
}
const router = useRouter()
const props = defineProps({
  /*
   * 状态
   */
  state: {
    type: [String, Number],
    default: ''
  },
  /*
   * 搜索关键字
   */
  search: {
    type: String,
    default: ''
  },
  /*
   * 当前页码
   */
  pageNum: {
    type: Number,
    default: 1
  },
  /*
   * 当前页大小
   */
  pageSize: {
    type: Number,
    default: 10
  }
})
const { proxy } = getCurrentInstance()
const emit = defineEmits(['total'])
const state = reactive({
  dataList: [],
  total: 0,
  loading: false,
  noMore: false,
  error: false
})
const queryData = reactive({
  search: props.search, // 搜索关键字 可以为空 string-query
  state: props.state, // 状态  0未开始 1进行中 2已结束 3 我参加的 string-query
  pageNum: props.pageNum, // 当前页码 number-query
  pageSize: props.pageSize // 当前页大小 number-query
})
const disabled = computed(() => state.loading || state.noMore)
const configProperties = {
  params: ['pageNum', 'pageSize', 'search', 'state']
}
const bindLoad = () => {
  if (state.noMore) return
  state.loading = true
  const data = proxy.$formatData({ data: queryData, configProperties })
  appDistributionQuerListGet(data).then((res) => {
    if (res.data.records.length > 0) {
      const newGoods = res.data.records
      const total = parseInt(res.data.total)
      newGoods.forEach((item) => {
        item.timeRange = item.stime && item.etime ? `${dayjs(item.stime).format('YYYY.MM.DD')}~${dayjs(item.etime).format('YYYY.MM.DD')}` : ''
        if (item.buy) {
          item.state = 3
        }
        item.stateDisplay = stateMap[item.state]
      })
      state.total = total
      state.noMore = total <= queryData.pageSize * queryData.pageNum
      state.dataList.push(...newGoods)
      nextTick(() => {
        queryData.pageNum++
        state.loading = false
        emit('total', state.total)
      })
    } else {
      state.noMore = true
    }
  }).catch(() => {
    state.error = true
  }).finally(() => {
    console.log('end')
    state.loading = false
  })
}
const propsWatch = watch(
  () => props,
  (d) => {
    for (const key in d) {
      if (Object.hasOwnProperty.call(queryData, key)) {
        queryData[key] = d[key]
      }
    }
    setDefault()
    bindLoad()
  },
  { deep: true, flush: 'post' }
)
const setDefault = (t) => {
  state.dataList = []
  state.total = 0
  state.loading = false
  state.noMore = false
  state.error = false
  emit('total', state.total)
}
const handleGoTo = (d) => {
  router.push({
    name: 'activityDetail',
    params: {
      id: d.id,
    },
  })
}
defineExpose({
  loadMore: bindLoad,
  resetData: setDefault
})
</script>

<style lang="scss" scoped>
.activity {
  width: 644px;
  margin-left: 26px;
  margin-top: 20px;
  cursor: pointer;

  &:nth-child(2n+1) {
    margin-left: 0;
  }

  &-img {
    width: 644px;
    height: 227px;
    position: relative;
  }

  &-tag {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 16px;
    border-radius: 0px 0px 16px 0px;
    padding: 3px 10px 5px 5px;

    &__0 {
      background: #F78D00;
    }

    &__1 {
      background: #0FCEA4;
    }

    &__2 {
      background: #4B4949;
    }

    &__3 {
      background: #D6000F;
    }
  }

  &-info {
    padding: 17px 20px;
    border: 1px solid var(--jbc-border-color);

    & div~div {
      margin-top: 12px;
    }
  }

  &-title {
    font-weight: bold;
    font-size: var(--jbc-font-size-extra-large);
    color: var(--jbc-font-color);
    line-height: 26px;
  }

  &-time,
  &-areas {
    font-size: var(--jbc-font-size-medium);
    color: var(--jbc-font-color-light);
    line-height: 21px;
  }


  &-list {
    display: flex;
    flex-wrap: wrap;

    &--tips {
      width: 100%;
      text-align: center;
    }
  }


}
</style>